"use client";

import Link from "next/link";
import { RiPlanetLine, RiPlanetFill, RiBookLine, RiBookFill, RiSettingsLine, RiSettingsFill } from '@remixicon/react'
import LogoSite from "@/app/components/base/logo/logo-site";
import { useNavigation, NavigationSection } from '@/app/context/navigation-context'
import { UserMenu } from './user-menu'
import { useAuth } from '@/app/context/auth-context'

interface HeaderProps {
  height?: number; // 高度值，单位为像素
}

const navClassName = `
  flex items-center relative px-3 h-8 rounded-xl
  font-medium text-sm
  cursor-pointer
  group
`

const Header = ({ height = 64 }: HeaderProps) => {
  const { currentSection, setCurrentSection } = useNavigation()
  const { isAdmin } = useAuth()

  const navItems = [
    {
      key: 'explore',
      label: '探索',
      icon: currentSection === 'explore' ? <RiPlanetFill className="w-4 h-4" /> : <RiPlanetLine className="w-4 h-4" />,
      href: '/explore/apps'
    },
    {
      key: 'knowledge',
      label: '知识库',
      icon: currentSection === 'knowledge' ? <RiBookFill className="w-4 h-4" /> : <RiBookLine className="w-4 h-4" />,
      href: '/knowledge'
    },
    // 只有管理员可以看到管理选项
    ...(isAdmin ? [{
      key: 'admin',
      label: '管理',
      icon: currentSection === 'admin' ? <RiSettingsFill className="w-4 h-4" /> : <RiSettingsLine className="w-4 h-4" />,
      href: '/admin/apps'
    }] : [])
  ]

  const handleNavClick = (section: NavigationSection) => {
    setCurrentSection(section)
  }

  return (
    <div 
      className='flex flex-1 items-center bg-background border-b border-gray-200 relative px-4' 
      style={{ 
        height: `${height}px`,
        minHeight: '40px'
      }}
    >
      {/* Logo 区域 */}
      <div className='flex w-64 p-2 pl-3 gap-1.5 items-center shrink-0'>
        <Link href="/" className='flex w-8 h-8 items-center justify-center gap-2 shrink-0'>
          <LogoSite className='object-contain' />
        </Link>
        <div className='font-light text-divider-deep'>/</div>
        <span className="text-sm font-medium">中科数字</span>
      </div>

      {/* 导航区域 */}
      <div className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center gap-2 z-10'>
        {navItems.map(item => {
          const isActive = currentSection === item.key
          return (
            <Link
              key={item.key}
              href={item.href}
              onClick={() => handleNavClick(item.key as NavigationSection)}
              className={`${navClassName} ${
                isActive 
                  ? 'bg-primary/5 shadow-sm text-primary' 
                  : 'text-gray-700 hover:bg-gray-100'
              }`}
            >
              {item.icon}
              <span className="ml-2">{item.label}</span>
            </Link>
          )
        })}
      </div>

      {/* 用户信息区域 */}
      <div className='flex items-center shrink-0 ml-auto'>
        <UserMenu />
      </div>
    </div>
  );
};

export default Header;
